layui.config({
    base: CXL.ctxPath + '/externaljs/'
}).extend({ //设定组件别名
    echarts: 'echarts/echarts',
    axios: 'axios/axios'
});
layui.use(['table', 'laydate', 'form', 'layer', 'element', 'echarts', 'axios'], function () {


    let form = layui.form;
    let element = layui.element;
    let router = layui.router();

    let craneType = "CD0";

    const xOffset = 0;
    const yOffset = 0;
    let app = new PIXI.Application({width: 1200, height: 538});

    let plcConnectSnList = ["cdsccscdsd", "dsccsvvdvds"];


    //初始化天车图形
    // 整体天车container
    const craneContainer = new PIXI.Container();


    //齿轮图形
    let bigCraneSprite = PIXI.Sprite.from(CXL.ctxPath + '/assets/images/craneWork/CD0BigCrane.png');
    //绳子图像
    let cord1Graphics = new PIXI.Graphics();
    let cord2Graphics = new PIXI.Graphics();

    //绳子容器
    let ropeContainer = new PIXI.Container();
    //吊具图形
    let smallCraneSprite = PIXI.Sprite.from(CXL.ctxPath + '/assets/images/craneWork/CD0SmallCrane.png');


    let startX = 350;
    let startZ = 84;


    app.renderer.background.color = 0x061639;
    document.getElementById('craneAnimate').appendChild(app.view);

    initPage();


    document.addEventListener('DOMContentLoaded', function () {
        var socket = new SockJS(CXL.ctxPath + '/websocket-endpoint');
        var stompClient = Stomp.over(socket);

        stompClient.connect({}, function () {
            stompClient.subscribe(CXL.ctxPath + '/craneWork/topic/messages', function (message) {
                console.log('Received: ' + message.body);
            });
        });
    });

    //初始化页面方法
    function initPage() {
        drawBackground();
        drawCrane();
        // drawCord();

        // connect();
        // setTimeout(function () {
        //     // //1秒后执行刷新
        //     // subscribeSocket();
        //     subscribeTaskStatus(craneType);
        //     subscribePlcData(plcConnectSnList);
        // }, 2000); //
        //
        //
        // setInterval(function () {
        //     startX += 1;
        //     startZ += 5;
        //
        //     if (startX > 800) {
        //         startX = 350;
        //     }
        //     if (startZ > 300) {
        //         startZ = 60
        //     }
        //
        //     animateCrane(startX, startZ)
        //
        //
        // }, 16)
    }


    //绘制背景
    function drawBackground() {
        let sprite = PIXI.Sprite.from(CXL.ctxPath + '/assets/images/craneWork/CD0Back.png');
        // sprite.scale.set(1.2);
        // sprite.position.set(140, 90);
        app.stage.addChild(sprite);
    }


    //绘制承轨梁
    function drawBeams() {


        //绘制左侧
        // 添加一个 Graphics 对象到舞台上
        const leftGraphics = new PIXI.Graphics();
        app.stage.addChild(leftGraphics);

        // 定义平行四边形的四个顶点
        const leftCraneBeamPoints = [
            new PIXI.Point(340 + xOffset, 100 + yOffset), // 左上角
            new PIXI.Point(360 + xOffset, 100 + yOffset), // 右上角
            new PIXI.Point(160 + xOffset, 700 + yOffset), // 右下角
            new PIXI.Point(140 + xOffset, 700 + yOffset),  // 左下角
        ];

// 绘制平行四边形
        leftGraphics.beginFill(0xFF0000);
        leftGraphics.drawPolygon(leftCraneBeamPoints);
        leftGraphics.endFill();


        // 添加一个 Graphics 对象到舞台上
        const rightGraphics = new PIXI.Graphics();
        app.stage.addChild(rightGraphics);

        // 定义平行四边形的四个顶点
        const rightCraneBeamPoints = [
            new PIXI.Point(1040 + xOffset, 100 + yOffset), // 左上角
            new PIXI.Point(1060 + xOffset, 100 + yOffset), // 右上角
            new PIXI.Point(860 + xOffset, 700 + yOffset), // 右下角
            new PIXI.Point(840 + xOffset, 700 + yOffset),  // 左下角
        ];

// 绘制平行四边形
        rightGraphics.beginFill(0xFF0000);
        rightGraphics.drawPolygon(rightCraneBeamPoints);
        rightGraphics.endFill();
    }

    //绘制天车
    function drawCrane() {

        app.stage.addChild(craneContainer);
        bigCraneSprite.x = 120;
        bigCraneSprite.y = 28;

        // pulleySprite.scale.set(1.2);


        // cord1Graphics.beginFill("red");
        // //设置锚点，防止缩放位置改变
        //
        // cord1Graphics.drawRect(360, 170, 2, 100);
        // cord1Graphics.pivot.y = 200;
        // cord1Graphics.endFill();


        smallCraneSprite.x = 139
        smallCraneSprite.y = 50
        // spreaderSprite.x = 280;
        // spreaderSprite.y = 240;
        // spreaderSprite.scale.set(1.05);

        craneContainer.addChild(bigCraneSprite);
        craneContainer.addChild(smallCraneSprite);
    }

    function drawCord() {
        //生成绳子的容器


        //容器加入舞台
        app.stage.addChild(ropeContainer);
        // ropeContainer.pivot.x = 0;
        ropeContainer.pivot.y = 0;
        // ropeContainer.anchor.y = 156;
        cord1Graphics = getLine(320, 156, 320, 240, "#f60909", 3);
        cord2Graphics = getLine(362, 156, 362, 240, "#f60909", 3);

        // 将Graphics对象添加到Container对象中
        ropeContainer.addChild(cord1Graphics);
        ropeContainer.addChild(cord2Graphics);


    }

    // 调整绳子长度和位置
    // function adjustRopeLength(length, x, y) {
    //     cord1Graphics.clear();
    //     cord1Graphics.lineStyle(2, 0xffffff);
    //     cord1Graphics.moveTo(0, 0);
    //     cord1Graphics.lineTo(0, length);
    //
    //     // 调整Container对象的位置
    //     ropeContainer.position.set(x, y);
    //     ropeContainer.height = length;
    //
    // }


    //绘制直线
    function getLine(beginX, beginY, endX, endY, color, width) {

        // 创建PIXI.Graphics对象
        const rope = new PIXI.Graphics();
// 设置线条样式
        rope.lineStyle(width, color);

// 绘制线条
        rope.moveTo(beginX, beginY);
        rope.lineTo(endX, endY);

        return rope;

// 创建PIXI.RenderTexture对象
        const renderTexture = PIXI.RenderTexture.create({
            width: app.screen.width,
            height: app.screen.height,
        });

    }


    function animateCrane(x, z) {
        let renderX = transformX(x);

        // console.log(craneContainer.x);
        // cord1Graphics.height = 599;
        // cord2Graphics.height = 599;
        craneContainer.x = renderX - 350;

        // //改变齿轮的位置
        // pulleySprite.x = renderX;
        // pulleySprite.y = 108;
        //
        //根据高度改变绳子的高度
        let cordLength = transformZ(z);


        // 获取当前 Container 对象的位置和宽度
        let nowCordX = ropeContainer.x;
        let nowCordY = ropeContainer.y;
        let nowCordWidth = ropeContainer.width;


        adjustRopeLength(cordLength, x, 0)

        spreaderSprite.y = 150 + cordLength;

    }


    // 调整绳子长度和位置
    function adjustRopeLength(length, x, y) {

        // 清空 Container 对象中的所有子元素
        ropeContainer.removeChildren();
        cord1Graphics = getLine(x - 30, 156, x - 30, 156 + length, "#f60909", 3);
        cord2Graphics = getLine(x + 12, 156, x + 12, 156 + length, "#f60909", 3);
        // 将Graphics对象添加到Container对象中
        ropeContainer.addChild(cord1Graphics);
        ropeContainer.addChild(cord2Graphics);
        // cord1Graphics = getLine(x - 320, 156, x - 320, y + length, "#f60909", 3);


        // // 调整Container对象的位置
        // ropeContainer.position.set(x - 350, y);
        // // ropeContainer.width = 0;
        // ropeContainer.height = length;
        //
        // // 将Container对象的宽度设置为1，以避免在缩小时出现细线
        // if (length < 2) {
        //     ropeContainer.width = 1;
        // }
    }

    function animate(delta) {
        // 移动物体
        container.x += 2 * delta;

        // 改变物体的长度
        const t = Date.now() / 1000;
        part2.width = 100 + Math.sin(t * 2) * 50;

        // 重新定位三个部分的位置
        part1.position.set(-25, 0);
        part2.position.set(25 + part1.width, 0);
        part3.position.set(part2.x + part2.width, 0);
    }

    //实际坐标转换为渲染坐标
    function transformX(x) {
        return x;
    }

    function transformZ(z) {
        return z;
    }

    //绘制垛位
    function drawStocks() {
        // 添加一个 Graphics 对象到舞台上
        const stockGraphics = new PIXI.Graphics();
        app.stage.addChild(stockGraphics);

// 设置虚线样式
        stockGraphics.lineStyle(100, 0x000000, 1, 0.5, true);

// 绘制虚线方框
        stockGraphics.drawRoundedRect(50, 50, 200, 200, 20);
    }

//保存动作
    form.on('submit(startTask)', function (data) {
        //封装启动参数
        let inputDataJson = JSON.stringify(data.field);
        let craneTypeJson = JSON.stringify(craneType);

        let submitData = {
            craneType: craneTypeJson,
            inputData: inputDataJson,
        };


        //发送开始命令
        startWork(submitData);


    });


    //停止任务
    form.on('submit(stopTask)', function (data) {
        //封装启动参数
        let inputDataJson = JSON.stringify(data.field);
        let craneTypeJson = JSON.stringify(craneType);

        let submitData = {
            craneType: craneTypeJson,
            inputData: inputDataJson,
        };


        //发送停止命令
        stopWork(submitData);


    });


});
